import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js"

// 创建场景
const scene = new THREE.Scene()

// 创建相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, //宽高比
  0.1, // 近平面
  1000 // 远平面
)

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器宽高
document.body.appendChild(renderer.domElement) // 将渲染器添加到body中
// 创建纹理加载器
const textrueLoader = new THREE.TextureLoader()
const textrue = textrueLoader.load("./image/井盖.png")

// 加载ao贴图 
const aoMap = textrueLoader.load("./image/ImageToStl.com_bloem_train_track_clear_4k.png")

// 创建平面
const planeGeometry = new THREE.PlaneGeometry(1, 1)
const planeMaterial = new THREE.MeshBasicMaterial({
  color:"#fff",
  map:textrue,
  transparent:true,
  aoMap:aoMap
})
const plane = new THREE.Mesh(planeGeometry,planeMaterial)
scene.add(plane)


// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 开启阻尼
controls.dampingFactor = 0.05 // 阻尼系数

// 设置相机位置
camera.position.z = 5
camera.position.y = 2
camera.position.x = 2
camera.lookAt(0, 0, 0)

// 添加世界辅助坐标器
const axisHelper = new THREE.AxesHelper(5)
scene.add(axisHelper)

function init() {
  controls.update() // 更新控制器
  requestAnimationFrame(init);
  renderer.render(scene, camera) // 渲染场景和相机
}

init() //初始化

// 创建GUI
const gui = new GUI()
gui.add(planeMaterial,"aoMapIntensity").min(0).max(1).name("ao贴图")